<script setup name="BizWxPayUserIndex">
import eventBus from "@/utils/eventBus";

import { updateBizCompany, getCompanyId, xcxUrl } from "@/api/biz/bizCompany";
import { ref } from "vue";
import storage from "@/utils/storage";
import { TOKEN } from "@/store/mutation-types";
const router = useRouter();

const data = ref({
  /**
   * 详情展示模式
   * router 路由跳转
   * dialog 对话框
   * drawer 抽屉
   */
  formMode: "drawer",
  // 详情
  form: {
    id: "",

    elecPoints: ""
  },
  lng: 111.361,
  lat: 30.64441,
  fileList: [],
  certPems: [],
  certKeys: [],
  elecProps: {
    visible: false
  }
});
const fileHeahers = ref({
  url: import.meta.env.VITE_APP_API_BASEURL + "/common/upload",
  headers: {
    Authorization: "Bearer " + storage.local.get(TOKEN)
  }
});
// 页面挂载时 调用
onMounted(() => {
  getCompanyIdV();
});
function handleClick(tab, event) {
  console.log(tab, event);
}
const activeName = ref("first");
function handleAvatarSuccess(res, file) {
  console.log(file.response.data.url);
  data.value.form.companyQrcode = file.response.data.url;
}
function handleAvatarSuccessShareImage(res, file) {
  console.log(file.response.data.url);
  data.value.form.shareImage = file.response.data.url;
}
function getCompanyIdV() {
  getCompanyId().then((res) => {
    data.value.form = res.data;
    initMap();
  });
}

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview = (uploadFile) => {
  console.log(uploadFile);
};

function handleupdate() {
  if (data.value.certKeys.length > 0) {
    data.value.form.certKey = data.value.certKeys[0].response.data.url;
  }
  if (data.value.certPems.length > 0) {
    data.value.form.certPem = data.value.certPems[0].response.data.url;
  }
  updateBizCompany(data.value.form).then((res) => {
    if (res.code == 200) {
      ElMessage.success({
        message: "保存成功",
        center: true
      });
    }
  });
}
function getXcxUrl() {
  xcxUrl({ id: data.value.form.id }).then((res) => {
    data.value.form = res.data;
    ElMessage.success({
      message: "操作成功",
      center: true
    });
  });
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确定要删除【 ${uploadFile.name}】 ?`).then(
    () => true,
    () => false
  );
};

function initMap() {
  var map;
  var drawingManager;
  var polygon;
  var center = new qq.maps.LatLng(data.value.lat, data.value.lng);
  console.log("center", data.value.form);
  //初始化地图
  map = new qq.maps.Map(document.getElementById("container"), {
    rotation: 0, //设置地图旋转角度
    pitch: 0, //设置俯仰角度（0~45）
    zoom: 14, //设置地图缩放级别
    center: center //设置地图中心点坐标
  });

  //画区域
  drawingManager = new qq.maps.drawing.DrawingManager({
    drawingControl: true,
    drawingControlOptions: {
      position: qq.maps.ControlPosition.TOP_LEFT,
      drawingModes: [qq.maps.drawing.OverlayType.POLYGON]
    },
    selectMode: true
  });
  drawingManager.setMap(map);

  //添加监听事件
  qq.maps.event.addListener(drawingManager, "overlaycomplete", function (e) {
    console.log("user", e.overlay.getPath().elems);
    data.value.form.elecPoints = JSON.stringify(e.overlay.getPath().elems);
  });
  polygon = new qq.maps.Polygon({
    map: map
  });
  var paths = [];
  if (data.value.form.elecPoints) {
    paths = JSON.parse(data.value.form.elecPoints).map((item) => {
      return new qq.maps.LatLng(item.lat, item.lng);
    });
  }

  polygon.setPath(paths);
}
</script>

<template>
  <div>
    <page-main style="height: calc(100vh - 160px); margin: 10px">
      <div style="height: calc(100vh - 160px); overflow-y: auto">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="小程序配置" name="first">
            <div style="margin-top: 20px">
              <el-form label-position="right" label-width="120px">
                <el-row>
                  <el-col :span="12">
                    <el-divider content-position="left" border-style="dashed"
                      >小程序设置</el-divider
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="小程序名称">
                      <el-input
                        placeholder="输入小程序名称"
                        v-model="data.form.xcxName"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="二维码过期(秒)">
                      <el-input
                        placeholder="二维码过期时间"
                        v-model="data.form.qrcodeExpiredTime"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="APPID">
                      <el-input
                        placeholder="输入APPID"
                        v-model="data.form.wechatXappid"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="Secret">
                      <el-input
                        placeholder="输入Secret"
                        v-model="data.form.wechatXappSecret"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="小程序链接">
                      <el-input
                        placeholder="小程序链接"
                        v-model="data.form.xcxurl"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-button
                      @click="getXcxUrl"
                      type="primary"
                      style="margin-left: 20px"
                      >获取链接</el-button
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-divider content-position="left" border-style="dashed"
                      >客服设置</el-divider
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="客服电话">
                      <el-input
                        placeholder="输入客服电话号码"
                        v-model="data.form.servicePhone"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="客服微信号">
                      <el-input
                        placeholder="输入客服微信号"
                        v-model="data.form.serviceWeChat"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <el-form-item label="企业微信码">
                      <el-upload
                        class="avatar-uploader"
                        :action="fileHeahers.url"
                        :headers="fileHeahers.headers"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                      >
                        <img
                          v-if="data.form.companyQrcode"
                          :src="data.form.companyQrcode"
                          class="avatar"
                        />

                        <svg-icon
                          v-else
                          class="el-icon-plus avatar-uploader-icon"
                          name="ep:picture-rounded"
                        />
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="工作时间">
                      <el-input
                        placeholder="输入工作时间"
                        v-model="data.form.workTime"
                      />
                      <el-alert
                        type="info"
                        :closable="false"
                        style="height: 40px; margin-top: 10px"
                      >
                        <p>时间格式：09：00-18:00</p>
                      </el-alert>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="商务合作电话">
                      <el-input
                        placeholder="输入商务合作电话"
                        v-model="data.form.businessPhone"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-divider content-position="left" border-style="dashed"
                      >分享设置</el-divider
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="分享图片">
                      <el-upload
                        class="avatar-uploader"
                        :action="fileHeahers.url"
                        :headers="fileHeahers.headers"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessShareImage"
                      >
                        <img
                          v-if="data.form.shareImage"
                          :src="data.form.shareImage"
                          class="avatar"
                        />

                        <svg-icon
                          v-else
                          class="el-icon-plus avatar-uploader-icon"
                          name="ep:picture-rounded"
                        />
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="分享名称">
                      <el-input
                        placeholder="输入分享名称"
                        v-model="data.form.shareName"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-divider content-position="left" border-style="dashed"
                      >备注信息</el-divider
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="备注">
                      <el-input
                        placeholder="请添加备注"
                        v-model="data.form.remark"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="text-align: center">
                    <el-button type="primary" @click="handleupdate"
                      >保存配置</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="微信支付" name="second">
            <div style="margin-top: 20px">
              <el-form label-position="right" label-width="120px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="商户号">
                      <el-input
                        placeholder="输入商户号"
                        v-model="data.form.wechatMchid"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="支付密钥">
                      <el-input
                        placeholder="输入支付密钥"
                        v-model="data.form.wechatMchKey"
                        type="password"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="证书序列号">
                      <el-input
                        placeholder="输入证书序列号"
                        v-model="data.form.certNo"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="支付回调地址">
                      <el-input
                        placeholder="支付回调地址"
                        v-model="data.form.notifyUrl"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="7">
                    <el-form-item label="证书pem">
                      <el-upload
                        v-model:file-list="data.certPems"
                        class="upload-demo"
                        :action="fileHeahers.url"
                        :headers="fileHeahers.headers"
                        multiple
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :limit="1"
                      >
                        <el-button type="primary">pem证书</el-button>
                        <template #tip>
                          <div class="el-upload__tip">上传pem证书文件</div>
                        </template>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="证书key">
                      <el-upload
                        v-model:file-list="data.certKeys"
                        class="upload-demo"
                        :action="fileHeahers.url"
                        :headers="fileHeahers.headers"
                        multiple
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :limit="1"
                      >
                        <el-button type="primary">证书key</el-button>
                        <template #tip>
                          <div class="el-upload__tip">上传证书key文件</div>
                        </template>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="text-align: center">
                    <el-button type="primary" @click="handleupdate"
                      >保存配置</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="运营区域配置" name="three">
            <el-form>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="设置运营范围">
                    <div class="container_map">
                      <div
                        id="container"
                        style="width: 100vw; height: 60vh"
                      ></div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="7" style="margin-left: 50px">
                  <el-row>
                    <el-col :span="24"
                      ><el-form-item label="坐标">
                        <el-input
                          type="textarea"
                          placeholder=""
                          v-model="data.form.elecPoints"
                          :autosize="{ minRows: 20, maxRows: 100 }"
                          :rows="18"
                        /> </el-form-item
                    ></el-col>

                    <el-col :span="24" style="text-align: center">
                      <el-button type="primary" @click="handleupdate"
                        >保存配置</el-button
                      >
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="微信公众号配置" name="fourth">
            <div style="margin-top: 20px">
              <el-form label-position="right" label-width="120px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="AppId">
                      <el-input
                        placeholder="AppId"
                        v-model="data.form.wechatMpappid"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="AppSecret">
                      <el-input
                        placeholder="AppSecret"
                        v-model="data.form.wechatMpappSecret"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="H5授权回调地址">
                      <el-input
                        placeholder="H5授权回调地址"
                        v-model="data.form.redirectUri"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6" style="text-align: center">
                    <el-button type="primary" @click="handleupdate"
                      >保存配置</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="短信配置" name="third">
            <div style="margin-top: 20px">
              <el-form label-position="right" label-width="120px">
                <el-row>
                  <el-col :span="12">
                    <el-divider content-position="left" border-style="dashed"
                      >短信宝配置</el-divider
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="账号" prop="smsBaoName">
                          <el-input
                            placeholder="账号"
                            v-model="data.form.smsBaoName"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="KEY" prop="smsBaoKey">
                          <el-input
                            placeholder="KEY"
                            v-model="data.form.smsBaoKey"
                            type="password"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="短信签名" prop="smsqm">
                          <el-input
                            placeholder="smsqm"
                            v-model="data.form.smsqm"
                          />
                        </el-form-item>
                      </el-col>

                      <el-col :span="12">
                        <el-form-item label="是否开启" prop="smsIsopen">
                          <el-radio-group v-model="data.form.smsIsopen">
                            <el-radio-button label="1">是</el-radio-button>
                            <el-radio-button label="0">否</el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="text-align: center">
                    <el-button type="primary" @click="handleupdate"
                      >保存配置</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="阿里云文件存储" name="five">
            <div style="margin-top: 20px">
              <el-form label-position="right" label-width="120px">
                <el-row>
                  <el-col :span="12">
                    <el-divider content-position="left" border-style="dashed"
                      >阿里云配置</el-divider
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="AliyunKey" prop="aliyunKey">
                          <el-input
                            placeholder="AliyunKey"
                            v-model="data.form.aliyunKey"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="Accesssecret"
                          prop="aliyunAccesssecret"
                        >
                          <el-input
                            placeholder="Accesssecret"
                            v-model="data.form.aliyunAccesssecret"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="名称" prop="bucketName">
                          <el-input
                            placeholder="名称"
                            v-model="data.form.bucketName"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="节点" prop="endpoint">
                          <el-input
                            placeholder="endpoint"
                            v-model="data.form.endpoint"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="是否开启" prop="ossIsopen">
                          <el-radio-group v-model="data.form.ossIsopen">
                            <el-radio-button label="1">是</el-radio-button>
                            <el-radio-button label="0">否</el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="text-align: center">
                    <el-button type="primary" @click="handleupdate"
                      >保存配置</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </page-main>
  </div>
</template>
<style>
.avatar-uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 58px;
  height: 58px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 38px;
  color: #409eff;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 58px;
  height: 58px;
  display: block;
}
.container_map {
  overflow: hidden;
}
</style>
